<template>
 <div class="com">
  <h1>留言板</h1>
  <div class="top">
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="心愿">
        <el-input v-model="form.region" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="qx">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="xia">
    <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="time" label="日期" />
      <el-table-column prop="region" label="心愿" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="d">
    选中数量{{store.getters.getnum }}
    <el-button type="primary" @click="deits">批量删除</el-button>
  </div>
 </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus'



const store = useStore()
const form = reactive({
  name: '',
  region: '',

})
// 添加事件
const onSubmit = () => {
  if (form.name == "" || form.region == "") {
    return alert('不能为空')
  }
  let obj = { name: form.name, region: form.region, id: new Date().getTime(), time: new Date().toLocaleString() }
  store.commit('add', obj)
  ElMessage({
    message: '添加成功',
    type: 'success',
  })
  form.name = form.region = ''
}
const qx = () => {
  ElMessage({
    message: '清空成功',
    type: 'warning',
  })
  form.name = form.region = ''
}


// 渲染事件
const multipleTableRef = ref()
const multipleSelection = ref([])
const tableData = computed(() => {
  return store.state.list
})


// 删除
const handleEdit = (a,b) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      store.commit('del',a)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
  
}
// 选中
const handleSelectionChange = (val) => {
  console.log(val);
  multipleSelection.value = val
  store.state.fpl=val
}
// 批量删除
const deits=()=>{
    store.commit('emit',multipleSelection.value)
}
</script>

<style lang="scss" scoped>
h1 {
  text-align: center;
}
.com{
  width: 90%;
  margin: auto;
}
</style>